<template>
	<view class="page-body">
		<!-- 下拉刷新部分 -->
		<mix-pulldown-refresh ref="mixPulldownRefresh" class="panel-content" :top="0" @refresh="onPulldownReresh" @setEnableScroll="setEnableScroll" >
			<view class="user-header">
				<view class="status"></view>
				<view class="set-head">
					<view class="setting" @tap="goSetting">
						<image src="/static/img/user/setting.png"></image>
					</view>
				</view>
				<!-- 用户信息 -->
				<view class="user" @tap="goSetting">
					<!-- 头像 -->
					<view class="left">
						<image :src="user.avator" ></image>
					</view>
					<!-- 昵称,个性签名 -->
					<view class="right">
						<view class="username" >{{user.account}}</view>
						<view class="signature" v-if="!hasLogin">点击跳转登录/注册页</view>
					</view>
				</view>
			</view>
			
			<view class="u-t" style="margin-top: 30upx;">我的订单</view>
			<view class="order">
				<!-- 订单类型 -->
				<view class="list">
					<view class="box" v-for="(row,index) in orderList" :key="index" @tap="toOrderList(index)">
						<view class="img">
							<image :src="row.icon" mode=""></image>
						</view>
						<view class="text">{{row.text}}</view>
						<view class="corner" v-if="row.count&&row.count!=0">{{row.count}}</view>
					</view>
				</view>
			</view>
			<view class="feature " >
				<view class="line flex" @click="goMyActivity">
					<text>我参加的五折购</text>
					<view class="i-right"><view class="icon xiangyou"></view></view>
				</view>
				<view class="line flex" @click="goInviteGift">
					<text>邀请有礼</text>
					<view class="i-right"><view class="icon xiangyou"></view></view>
				</view>
				<view style="height: 30upx;"></view>
				<view class="line flex" @click="goMyCoupon">
					<text>优惠券</text>
					<view class="i-right"><view class="icon xiangyou"></view></view>
				</view>
				<view class="line flex" @click="goAddress">
					<text>地址管理</text>
					<view class="i-right"><view class="icon xiangyou"></view></view>
				</view>
				<view style="height: 30upx;"></view>
				<!-- 分享app -->
				<!-- #ifdef APP-PLUS -->
				<view  class="line flex" @click="share">
					<text>分享APP</text>
					<view class="i-right"><view class="icon xiangyou"></view></view>
				</view>
				<!--#endif -->
				<view  class="line flex" @click="goService">
					<text>联系QQ客服</text>
					<text style="font-size: 28upx;line-height: 30upx;padding-right: 40upx;">348769545</text>
					<view class="i-right"><view class="icon xiangyou"></view></view>
				</view>
				<view @click="goSetting" class="line flex" >
					<text>系统设置</text>
					<view class="i-right"><view class="icon xiangyou"></view></view>
				</view>
			</view>
			<!-- 工具栏 -->
			<!-- <view class="u-t">我的工具栏</view>
			<view class="toolbar">
				<view class="list">
					<view class="box" v-for="(row,index) in mytoolbarList" :key="index" @tap="toPage(row)">
						<view class="img">
							<image :src="row.img"></image>
						</view>
						<view class="text">{{row.text}}</view>
					</view>
				</view>
			</view> -->
			<!-- 占位 -->
			<view class="place-bottom"></view>
		</mix-pulldown-refresh>
	</view>
</template>
<script>
	import {
        mapState,
        mapMutations
    } from 'vuex';
	import {showtip} from '@/utils/utils.js';
	import mixPulldownRefresh from '@/components/mix-pulldown-refresh/mix-pulldown-refresh';
	var that;
	var orderList = [
		{text:'待付款',icon:"/static/img/user/fukuan.png",count:0},
		{text:'待发货',icon:"/static/img/user/fahuo.png",count:0},
		{text:'待收货',icon:"/static/img/user/shouhuo.png",count:0},
		{text:'待评价',icon:"/static/img/user/pingjia.png",count:0},
		{text:'退换货',icon:"/static/img/user/tuihuo.png",count:0}
	]
	export default {
		data() {
			return {
				headerPosition:"fixed",
				headerTop:null,
				statusTop:null,
				showHeader:true,
				//个人信息,
				user:{
					account:'游客',
					avator:'/static/img/defalut_user.png',
					balance:0,
					yongjin:0
				},
				// 订单类型
				orderList:orderList,
				// 工具栏列表
				mytoolbarList:[
					// {url:'../../user/keep/keep',text:'我的收藏',img:'/static/img/user/point.png',hasLogin:true},
					// {url:'../../user/coupon/coupon',text:'代金券',img:'/static/img/user/quan.png',hasLogin:true}, 
					// {url:'',text:'邀请有礼',img:'/static/img/user/renw.png',hasLogin:true},
					// {url:'../../user/address/address',text:'收货地址',img:'/static/img/user/addr.png',hasLogin:true},
					// {text:'客服',img:'/static/img/user/kefu.png'},
					// {text:'',img:'/static/img/user/kefu.png'},
					// {text:'签到',img:'/static/img/user/mingxi.png'}
				],
				isOpenAccount:false
			}
		},
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop>=0?"fixed":"absolute";
			this.headerTop = e.scrollTop>=0?null:0;
			this.statusTop = e.scrollTop>=0?null:-this.statusHeight+'px';
		},
		onLoad() {
			that = this;
			this.statusHeight = 0;
			// #ifdef APP-PLUS
			this.statusHeight = plus.navigator.getStatusbarHeight();
			// #endif
		},
		
		onShow(){
			that = this;
			if(this.hasLogin){
				this.getManage();
				this.getorderCount();
			}else{
				this.user={
					account:'游客',
					avator:'/static/img/defalut_user.png',
					balance:0,
					yongjin:0
				}
				orderList.forEach((item,index)=>{
					item.count = 0
				})
				that.orderList = orderList
			}
		},
		onReady(){
		
		},
		methods: {
			...mapMutations(['changeisOpenAccount']),
			getManage(){ //用户信息
				this.$https.POST({
					url:'/user/manage',
					data:{},
					success(res){
						res.data.avator = "/static/img/defalut_user.png";
						that.user = res.data;
						uni.stopPullDownRefresh();
					}
				})
			},
			getorderCount(){
				this.$https.POST({
					url:'/order/orderCount',
					data:{},
					success(res){
						let ordercount = res.data; 
						let orderList = that.orderList;
						orderList.forEach((item,index)=>{
							if(index == 0){
								item.count = ordercount.wait_pay;
							}else if(index == 1){
								item.count = ordercount.wait_delivery
							}else if(index == 2){
								item.count = ordercount.wait_receiving
							}else if(index == 3){
								item.count = ordercount.wait_comment
							}else if(index == 4){
								item.count = ordercount.returning
							}
							that.$set(that.orderList,index,item)
						})
						uni.stopPullDownRefresh();
					}
				})	
			},
			toOrderList(index){
				showtip(this,'/pages/user/order_list/order_list?tbIndex='+index )
				uni.setStorageSync('tbIndex',index);
			},
			goMyActivity(){
				showtip(this,"/pages/user/order_list/myActivity")
			},
			goInviteGift(){
				showtip(this,"/pages/user/invite/invite")
			},
			goMyCoupon(){
				showtip(this,"/pages/user/coupon/coupon")
			},
			goAddress(){
				showtip(this,"/pages/user/address/address")
			},
			goSetting(){
				if(this.hasLogin){
					uni.navigateTo({
						url:"/pages/user/setting/setting"
					})
				}else{
					uni.navigateTo({
						url:"/pages/login/login"
					})
				}
			},
			goService(){
				// 打开QQ 
			},	
			toMyQR(){
				showtip(this,'/pages/user/myQR/myQR')
			},
			goLogin(){
				
			},
			toPage(row){
				let url = row.url;
				if(row.hasLogin&&!this.hasLogin){
					this.$showToast('请先登录');
					setTimeout(function() {
						uni.navigateTo({
							url:"/pages/login/login"
						})
					}, 1000);
					return false;
				}
				if(!url){
					uni.showToast({title: '正在开发中',icon:"none"});return;
				}
				uni.navigateTo({
					url:url
				})
			},
			
			setEnableScroll(enable){//设置scroll-view是否允许滚动，在小程序里下拉刷新时避免列表可以滑动
				if(this.enableScroll !== enable){
					this.enableScroll = enable;
				}
			},
			onPulldownReresh(){
				if(this.hasLogin){
					this.getManage()
					this.getorderCount()	
				}
				// 关闭下拉刷新
				this.$refs.mixPulldownRefresh && this.$refs.mixPulldownRefresh.endPulldownRefresh();
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			if(this.hasLogin){
				this.getManage()
				this.getorderCount()	
			}else{
				uni.stopPullDownRefresh();
			}
		},
		computed:mapState({
			hasLogin(state){
				return state.hasLogin==""?false:true
			},
			hasNetwork(state){
				return state.isConnected
			}
		}),
		watch:{
			hasNetwork(newValue,oldValue){
				if(newValue){
					if(this.hasLogin){
						this.getManage()
						this.getorderCount()	
					}else{
						
					}
				}
			},
			hasLogin(newValue,oldValue){
				if(!newValue){
					
				}
			}
		},
		components:{
			mixPulldownRefresh
		}
	} 
</script>
<style lang="scss">
	@import '../../../static/css/user.css';
	page{position: relative;background-color:$bgcolor;}
	.user-header{
		background:$maincolor;
		// &::after{
		// 	content: "";
		// 	display: block;
		// 	position: absolute;
		// 	z-index: -1;
		// 	top: 0;
		// 	left: -40%;
		// 	width: 180%;
		// 	height:330upx ;
		// 	border-radius: 0 0 50% 50%; 
		// 	background:$maincolor;
		// }
	}
	.status {
		width: 100%;
		height: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height);//覆盖样式
		/*  #endif  */
		background:$maincolor;
	}
	
	.set-head{
		height: 100upx;
		line-height: 100upx;
		align-items: center;
		display: flex;
		justify-content: flex-end;
		box-sizing:border-box;
		padding: 0 20upx;
		.setting{color: #fff;width: 46upx;height:46upx;padding: 0 20upx; line-height:46upx;
			image{width: 46upx;height: 46upx;}
		}
	}
	.place{
		height: 100upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}
	.place-bottom{
		height: 100upx;
	}
	.user{
		width: 92%;
		padding: 0 4%;
		display: flex;
		align-items: center;
		// position: relative;
		padding-bottom: 80upx;
		.left{
			width: 20vw;
			height: 20vw;
			flex-shrink: 0;
			margin-right: 20upx;
			border-radius: 100%;
			image{
				width: 20vw;
				height: 20vw;
				border-radius: 100%;
			}
			
		}
		.right{
			width: 100%;
			.username{
				font-size: 36upx;
				color: #fff;
			}
			.signature{
				color: #eee;
				font-size: 28upx;
				padding-top: 16upx;
			}
		}
		.erweima{
			flex-shrink: 0;
			width: 10vw;
			height: 10vw;
			margin-left: 5vw;
			border-radius: 100%;
		
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(to left, #fbbb37 0%,#fcf0d0 105%);
			.icon{
				color: #7b6335;
				font-size: 42upx;
			}
		}
	}
	.order{
		width: 84%;
		margin: 0 4% 30upx 4%;
		padding: 30upx 4% 30upx 4%;
		background-color: #fff;
		box-shadow: 0upx 0upx 25upx rgba(0,0,0,0.1);
		border-radius: 15upx;
		.list{
			display: flex;
			.box{
				width: 20%;
				
				.img{
					width: 100%;
					padding: 20upx 0 10upx;
					display: flex;
					justify-content: center;
					image{
						width: 50upx;
						height: 50upx;
					}
				}
				.text{
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 28upx;
					line-height: 50upx;
					color: #131313;
				}
			}
		}
		.balance-info{
			display: flex;
			padding: 10upx 0;
			.left{
				width: 65%;
				display: flex;
				.box{
					width: 50%;
					font-size: 28upx;
					.num{
						width: 100%;
						height: 50upx;
						display: flex;
						justify-content: center;
						align-items: flex-end;
						color: #FA3232;
						font-size: 36upx;
					}
					.text{
						width: 100%;
						display: flex;
						justify-content: center;
						color: #3d3d3d;
						font-size: 28upx;
					}
				}
			}
			.right{
				width: 35%;
				.box{
					
					.img{
						width: 100%;
						height: 50upx;
						display: flex;
						justify-content: center;
						align-items: flex-end;
						.icon{
							font-size: 45upx;
							color: #e78901;
						}
					}
					.text{
						width: 100%;
						display: flex;
						justify-content: center;
						font-size: 28upx;
						color: #3d3d3d;
					}
				}
			}
		}
	}
	.toolbar{
		width: 92%;
		margin: 0 4% 0 4%;
		padding: 30upx 0 10upx 0;
		background-color: #fff;
		box-shadow: 0upx 0upx 25upx rgba(0,0,0,0.1);
		border-radius: 15upx;
		.title{
			padding-top: 10upx;
			margin: 0 0 10upx 3%;
			font-size: 30upx;
			height: 80upx;
			display: flex;
			align-items: center;
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			.box{
				width: 25%;
				margin-bottom: 30upx;
				.img{
					width: 23vw;
					height: 10.5vw;
					display: flex;
					justify-content: center;
					
					image{
						width: 9vw;
						height: 9vw;
					}
				}
				.text{
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 26upx;
					color: #3d3d3d;
				}
			}
		}
	}
	
	.u-t{
		font-size: 38upx; color:#0A0000; line-height: 80upx;
		width: 92%;
		margin: 0 4% 0 4%;
	}
	.box{
		position:relative;
		.corner{
			position: absolute;
			top: 4upx;
			right:16upx;
			min-width: 36upx;
			padding: 0 8upx;
			height: 36upx;
			border-radius: 18upx;
			color: $maincolor;
			border:1px solid $maincolor;
			background: #fff;
			line-height: 36upx;
			text-align: center;
			box-sizing: border-box;
		}
	}
	.icon.xiangyou{margin-right: 40upx;}
	.line{padding: 0 40upx;}
</style>
